<script setup lang="ts">
import { getAvatarListAPI, putUserAPI } from '@/services/my'
import { useMemberStore } from '@/stores'
import { donationTypeStore } from '@/stores/modules/donationType'
import type { Avatar, UserDto } from '@/types/my'
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'

const memberStore = useMemberStore()
const avatarList = ref<Avatar[]>([]) //头像列表
const showAvatarSelector = ref(false) // 显示头像选择器

//获取头像列表
const getAvatarData = async () => {
  try {
    const res = await getAvatarListAPI()
    avatarList.value = res.rows
  } catch (error) {
    uni.showToast({
      title: '获取头像列表失败',
      icon: 'none',
    })
  }
}

// 更新用户头像
const updateAvatar = (avatar: Avatar) => {
  // 调用更新API
  putUserAPI({ image: avatar.image })
    .then(() => {
      // 更新本地显示的头像
      if (memberStore.profile?.user) {
        memberStore.profile.user.image = avatar.image
      }
      // 关闭选择器
      showAvatarSelector.value = false

      // 显示成功提示
      uni.showToast({
        title: '头像修改成功',
        icon: 'success',
      })
    })
    .catch(() => {
      uni.showToast({
        title: '头像修改失败',
        icon: 'none',
      })
    })
}

// 计算用户是否已登录
const isLoggedIn = computed(() => {
  return memberStore.profile?.token
})

// 获取用户昵称和头像
const userNickname = computed(() => {
  return isLoggedIn.value ? memberStore.profile?.user?.userName || '用户' : '未登录'
})

const userAvatar = computed(() => {
  return isLoggedIn.value ? memberStore.profile?.user?.image : '/static/images/not_login_avatar.png'
})

// 处理头像点击
const handleAvatarClick = () => {
  if (!isLoggedIn.value) {
    // 未登录时跳转到登录页
    goToLogin()
  } else {
    //展示头像列表
    showAvatarSelector.value = true
  }
}

// 关闭头像选择器
const closeAvatarSelector = () => {
  showAvatarSelector.value = false
}

// 跳转到个人资料页面
const goToProfile = () => {
  uni.navigateTo({
    url: '/pagesMember/profile/profile',
  })
}

//跳转到登录页面
const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login',
  })
}

// 跳转到我的活动页面
const goToMyActivities = () => {
  uni.navigateTo({
    url: '/pagesMember/my-activities/my-activities',
  })
}

// 跳转到我的订单页面
const goToMyOrders = (type?: string, status?: string) => {
  let url = '/pagesMember/my-orders/my-orders'
  if (type || status) {
    url += '?'
    if (type) url += `type=${type}`
    if (type && status) url += '&'
    if (status) url += `status=${status}`
  }
  uni.navigateTo({ url })
}

//页面加载
onLoad(() => {
  getAvatarData()
})
</script>

<template>
  <view class="my-page">
    <!-- 用户信息顶部区域 -->
    <view class="user-header" :style="{ paddingTop: 'var(--status-bar-height, 25px)' }">
      <view class="header-bg"></view>
      <view class="header-content">
        <view class="user-info">
          <image
            class="user-avatar"
            :src="userAvatar"
            mode="aspectFill"
            @tap="handleAvatarClick"
          ></image>
          <view class="user-details" @tap="!isLoggedIn && goToLogin()">
            <view class="user-nickname">{{ userNickname }}</view>
            <view class="user-id" v-if="isLoggedIn"
              >ID: {{ memberStore.profile?.user?.id || '无' }}</view
            >
            <view class="login-tip" v-else>点击登录账号</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 功能区域 -->
    <view class="function-area">
      <!-- 我的捐赠 -->
      <view class="function-group">
        <view class="group-title">我的捐赠</view>
        <view class="function-grid">
          <view class="function-item" @tap="goToMyOrders('donate', '0')">
            <view class="function-icon pending-icon">
              <text class="iconfont icon-waiting"></text>
            </view>
            <text>待审核</text>
          </view>
          <view class="function-item" @tap="goToMyOrders('donate', '2')">
            <view class="function-icon pending-icon">
              <text class="iconfont icon-waiting"></text>
            </view>
            <text>待入库</text>
          </view>
          <view class="function-item" @tap="goToMyOrders('donate', '7')">
            <view class="function-icon received-icon">
              <text class="iconfont icon-received"></text>
            </view>
            <text>已完成</text>
          </view>
          <view class="function-item" @tap="goToMyOrders('donate', '1')">
            <view class="function-icon history-icon">
              <text class="iconfont icon-favorite"></text>
            </view>
            <text>已取消</text>
          </view>
        </view>
      </view>

      <!-- 我的取货 -->
      <view class="function-group">
        <view class="group-title">我的取货</view>
        <view class="function-grid">
          <view class="function-item" @tap="goToMyOrders('pickup', '')">
            <view class="function-icon donated-icon">
              <text class="iconfont icon-donate"></text>
            </view>
            <text>全部</text>
          </view>
          <view class="function-item" @tap="goToMyOrders('pickup', '6')">
            <view class="function-icon pending-icon">
              <text class="iconfont icon-waiting"></text>
            </view>
            <text>待取货</text>
          </view>
          <view class="function-item" @tap="goToMyOrders('pickup', '4')">
            <view class="function-icon received-icon">
              <text class="iconfont icon-received"></text>
            </view>
            <text>已完成</text>
          </view>
          <view class="function-item" @tap="goToMyOrders('pickup', 'favorite')">
            <view class="function-icon history-icon">
              <text class="iconfont icon-favorite"></text>
            </view>
            <text>收藏</text>
          </view>
        </view>
      </view>

      <!-- 其他功能 -->
      <view class="function-group">
        <view class="group-title">其他服务</view>
        <view class="function-list">
          <view class="function-list-item" @tap="goToProfile">
            <view class="item-left">
              <view class="item-icon settings-icon">
                <text class="iconfont icon-settings"></text>
              </view>
              <text>个人资料</text>
            </view>
            <text class="iconfont icon-arrow-right"></text>
          </view>
          <view class="function-list-item" @tap="goToMyActivities">
            <view class="item-left">
              <view class="item-icon activity-icon">
                <text class="iconfont icon-activity"></text>
              </view>
              <text>我的活动</text>
            </view>
            <text class="iconfont icon-arrow-right"></text>
          </view>
          <view class="function-list-item">
            <view class="item-left">
              <view class="item-icon help-icon">
                <text class="iconfont icon-help"></text>
              </view>
              <text>帮助与反馈</text>
            </view>
            <text class="iconfont icon-arrow-right"></text>
          </view>
          <view class="function-list-item">
            <view class="item-left">
              <view class="item-icon about-icon">
                <text class="iconfont icon-about"></text>
              </view>
              <text>关于我们</text>
            </view>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-btn-wrapper" v-if="isLoggedIn">
      <button
        class="logout-btn"
        @tap="memberStore.clearProfile(), donationTypeStore().clearDonationType()"
      >
        退出登录
      </button>
    </view>

    <!-- 头像选择弹窗 (自定义弹窗) -->
    <view v-if="showAvatarSelector" class="custom-popup">
      <view class="popup-mask" @tap="closeAvatarSelector"></view>
      <view class="avatar-selector">
        <view class="selector-header">
          <text class="selector-title">选择头像</text>
          <text class="selector-close" @tap="closeAvatarSelector">×</text>
        </view>
        <scroll-view class="avatar-list" scroll-y>
          <view class="avatar-grid">
            <view
              class="avatar-item"
              v-for="(avatar, index) in avatarList"
              :key="index"
              @tap="updateAvatar(avatar)"
            >
              <image class="avatar-image" :src="avatar.image" mode="aspectFill"></image>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.my-page {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding-bottom: 40rpx;
}

// 用户信息顶部区域
.user-header {
  height: 340rpx;
  position: relative;
  overflow: hidden;

  .header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(125deg, #2c3e50, #4a69bd, #1e3c72);

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: radial-gradient(
          circle at 20% 80%,
          rgba(255, 255, 255, 0.1) 0%,
          transparent 20%
        ),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 20%);
    }
  }

  .header-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .user-info {
    display: flex;
    align-items: center;
    padding: 30rpx 40rpx;

    .user-avatar {
      width: 140rpx;
      height: 140rpx;
      border-radius: 70rpx;
      background-color: #f0f0f0;
      margin-right: 40rpx;
      border: 4rpx solid rgba(255, 255, 255, 0.6);
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
    }

    .user-details {
      .user-nickname {
        font-size: 38rpx;
        font-weight: 600;
        color: #fff;
        margin-bottom: 10rpx;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
      }

      .user-id {
        font-size: 26rpx;
        color: rgba(255, 255, 255, 0.8);
      }

      .login-tip {
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.9);
        background-color: rgba(255, 255, 255, 0.2);
        padding: 6rpx 20rpx;
        border-radius: 30rpx;
        display: inline-block;
      }
    }
  }
}

// 功能区域
.function-area {
  padding: 30rpx;
  margin-top: -50rpx;
  position: relative;
  z-index: 3;

  .function-group {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);

    .group-title {
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 30rpx;
      position: relative;
      padding-left: 20rpx;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 28rpx;
        background: linear-gradient(to bottom, #2c3e50, #4a69bd);
        border-radius: 3rpx;
      }
    }

    .function-grid {
      display: flex;
      justify-content: space-between;

      .function-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 25%;

        .function-icon {
          width: 90rpx;
          height: 90rpx;
          border-radius: 45rpx;
          background-color: #f0f7ff;
          margin-bottom: 16rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);

          .iconfont {
            font-size: 40rpx;
            color: #4a69bd;
          }
        }

        text {
          font-size: 26rpx;
          color: #333;
        }

        .pending-icon {
          background-color: #ecf6ff;
        }

        .received-icon {
          background-color: #f0f9eb;

          .iconfont {
            color: #52c41a;
          }
        }

        .donated-icon {
          background-color: #fef0f0;

          .iconfont {
            color: #f56c6c;
          }
        }

        .history-icon {
          background-color: #f5f5f5;

          .iconfont {
            color: #909399;
          }
        }
      }
    }

    .function-list {
      .function-list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 1rpx solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .item-left {
          display: flex;
          align-items: center;

          .item-icon {
            width: 60rpx;
            height: 60rpx;
            border-radius: 30rpx;
            background-color: #f5f5f5;
            margin-right: 20rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            .iconfont {
              font-size: 30rpx;
              color: #4a69bd;
            }
          }

          text {
            font-size: 28rpx;
            color: #333;
          }
        }

        .iconfont {
          color: #c0c4cc;
          font-size: 30rpx;
        }
      }
    }
  }
}

// 退出登录按钮
.logout-btn-wrapper {
  padding: 30rpx;
  margin-top: 30rpx;

  .logout-btn {
    background-color: #fff;
    color: #ff4d4f;
    border-radius: 45rpx;
    font-size: 32rpx;
    width: 100%;
    height: 90rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
  }
}

// 自定义弹窗
.custom-popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;

  .popup-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
  }
}

// 头像选择器样式
.avatar-selector {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding-bottom: 30rpx;
  animation: slideUp 0.3s ease;

  .selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;

    .selector-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }

    .selector-close {
      font-size: 40rpx;
      color: #999;
      padding: 0 10rpx;
    }
  }

  .avatar-list {
    max-height: 600rpx;
    padding: 20rpx 30rpx;

    .avatar-grid {
      display: flex;
      flex-wrap: wrap;

      .avatar-item {
        width: 150rpx;
        height: 150rpx;
        margin: 15rpx;

        .avatar-image {
          width: 100%;
          height: 100%;
          border-radius: 75rpx;
          border: 4rpx solid #f5f5f5;

          &:active {
            border-color: #4a69bd;
          }
        }
      }
    }
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

// 图标字体
@font-face {
  font-family: 'iconfont';
  src: url('data:application/x-font-woff2;charset=utf-8;base64,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');
  font-weight: normal;
  font-style: normal;
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-right:before {
  content: '\e61c';
}

.icon-waiting:before {
  content: '\e619';
}

.icon-received:before {
  content: '\e649';
}

.icon-donate:before {
  content: '\e65f';
}

.icon-favorite:before {
  content: '\e654';
}

.icon-settings:before {
  content: '\e657';
}

.icon-help:before {
  content: '\e634';
}

.icon-about:before {
  content: '\e666';
}
</style>
